<template>
    <!-- 商品 -->
    <view v-if="info" class="page">
        <image class="banner" :src="info.images[0]" mode="aspectFill">

        </image> 
        <view class="container mar-t-5">
            <view class="font-size-16 font-bold font-color-333">
                {{info.name}}
            </view>
            <view class="flex align-center flex">
                <progress class="flex-1" :percent="Math.ceil(parseInt(info.sale_num)/parseInt(info.stock_num)*100)"  active stroke-width="8" :border-radius="20" activeColor="#F83F20 " />
                <view class="mar-l-3 font-color-888 font-size-13">已兑换{{Math.ceil(parseInt(info.sale_num)/parseInt(info.stock_num)*100)}}%</view>
            </view>
            <view class="flex align-center mar-t-3">
                <image style="width: 32rpx;height: 32rpx;" src="https://vkceyugu.cdn.bspapp.com/VKCEYUGU-767674fd-0f0e-4801-90e6-bef27c2e36df/eb4cf218-061a-4016-adc6-c583bc3280b0.png"></image>
                <view class="font-color-price font-bold font-size-16 mar-l-3 mar-t-3">
                    {{info.score_price}}
                </view>
                <view class="">
                    <text class="mar-l-5 font-color-666 font-size-13">已兑 {{info.sale_num}}个</text>
                    <text class="mar-l-5 font-color-666 font-size-13">库存 {{info.stock_num}}个</text>
                </view>
            </view>    
        </view>
       <view class="container mar-t-10">
            <view class="pad-t-10 border-t-1 content">
                <view class="mar-b-10 font-bold  font-size-16 font-color-555">商品详情</view>
                <rich-text :nodes="content" ></rich-text>
            </view>
       </view>
       <view style="height:60px"></view>
       <view class="footer text-center"  @click="dh">
            <text class="font-size-16">立即兑换</text>
       </view>
    </view>
</template>

<script>
import {goodsDetail} from '@/utils/http'
import mkIcon from '../../components/mk-icon.vue'
export default {
    components: { mkIcon },    
    data(){
        return {
            id:'',
            info:'',
            content:''
        }
    },
    methods:{
        detail(){
            goodsDetail({id:this.id}).then(res=>{
                if(res){
                    this.info = res
                    this.content = this.formatRichText(res.content)
                }
            })
        },
        dh(){
            if(this.info.stock_num>0){
            }
             this.href('/pages/score/confirm?id='+this.info.id)
        }
    },
  
    onLoad(options){
        this.id = options.id
        this.detail();
    }
}
</script>

<style scoped>
.banner{
    max-height: 260px;
    background-color: #ccc;
    width: 100%;
}
.dh{
    height: 40px;
    line-height: 40px;
    width: 100%;
    background-color: #0088FF;
    margin: 0 auto;
    margin-top: 10px;
    text-align: center;
    border-radius: 20px;
    color: #fff;
    letter-spacing: 5px;
}
.content img{
    width: 100%;
}
.footer{
    position: fixed;
    bottom: 0;
    right: 0;
    left: 0;
    overflow: hidden;
    width: 100%;
    height: 50px;
    line-height: 50px;
    text-align: center;
    background-color: #e74c3c;
    color: #fff;
}

</style>